<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.profile-card {
				width: 100%;
				text-align: center;
				color: white;
				padding: 30px 0;
				line-height: 1.4;
				background-color: #fff;
				background: url(../image/member/background.jpg) no-repeat;
				background-size: cover;
				text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
			}
			
			.profile-image {
				height: 100px;
				width: 100px;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				background-color: black;
				border 1px solid white;
				box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 0px 0px;
				-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 0px 0px;
			}
			
			.profile-name {
				margin: 20px 0 0 0;
				font-weight: 600;
				font-size: 17px;
			}
			
			.profile-id {
				margin: 0 0 5px 0;
				font-size: 14px;
				opacity: 0.6;
			}
			
			.profile-desc {
				font-size: 15px;
				opacity: 0.6;
				width: 90%;
				text-align: center;
				margin: 0 auto;
			}
			
			.info-col {
				height: 60px;
				line-height: 1;
				padding: 12px 0 12px 4px;
			}
			
			.info-num {
				font-size: 16px;
				font-weight: 500;
				opacity: 0.8;
			}
			
			.info-unit {
				margin-top: 6px;
				font-size: 14px;
				opacity: 0.4;
			}
			
			.mui-btn-block {
				padding: 10px 30px;
			}
			
			.mui-button-row {
				/* height: 30px; */
				position: relative;
				padding: 10px 30px;
			}
			
			h5 {
				font-size: 18px;
			}
			
			.mui-btn-primary {
				background-color: #0bc188;
				border: 1px solid #0BC188;
			}
			
			.mui-btn-negative {
				background-color: #f6661f;
				border: 1px solid #F6661F;
			}
			
			.mui-table-view:after {
				height: 0px;
			}
		</style>
	</head>

	<body style="background-color: #FFFFFF;">

		<div class="mui-content">
			<div class="profile-card">
				<img src="../image/default_user_portrait.gif" class="profile-image" id="avatar">
				<div class="profile-name" id="name"></div>
				<div class="profile-id" id="money"></div>
				<div class="profile-desc" id="des"></div>
			</div>

			<ul class="mui-table-view" id="list">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="changepassword.html">
						<h5>&nbsp;修改密码</h5>
					</a>
				</li>

				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" id="changeavatar">
						<h5>&nbsp;修改头像</h5>
					</a>
				</li>

				<li class="mui-table-view-cell">
					<a href="wrong.html" class="mui-navigate-right">
						<h5>&nbsp;我的错题</h5>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a id="coupon" class="mui-navigate-right" href="analytic.html">
						<h5>&nbsp;数据统计</h5>
					</a>
				</li>
				<br/>
			</ul>
		</div>
		<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function upload(path) {
				var imageFilter = api.require("imageFilter");
				imageFilter.compress({
					img: path,
					quality: 0.1,
					scale: 0.5,
					save: {
						album: true,
						imgPath: "fs://image/",
						imgName: "avatar.png"
					}
				}, function(ret, err) {
//					alert(JSON.stringify(ret));
					if (ret.status == true) {
						var key = getUserKey();
						var url = MYAPP.webroot + "/api/index.php/Home/User/uploadAvatar"
						var data = {
							key: key
						}
						var files = {
							file: 'fs://image/avatar.png'
						}
						showWaiting("头像上传中，请稍候!");
						api.ajax({
							url: url,
							method: 'post',
							timeout: 100,
							dataType: 'json',
							returnAll: false,
							data: {
								values: data,
								files: files
							}
						}, function(ret, err) {
							if (ret) {
								hideWaiting();
								loginstatus();
								api.sendEvent({
								    name: 'loginsuccess'
								});
							} else {
								api.alert({
									msg: ('错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode)
								});
							}
						});
					} else {
						api.alert({
							msg: "图片压缩失败!"
						});
					}
				});
			}

			function changeAvatar() {
				api.confirm({
					title: '选择图片',
					msg: '确定修改头像？',
					buttons: ['确定', '取消']
				}, function(ret, err) {
					var obj = api.require('UIMediaScanner');
					if (ret.buttonIndex == 3) {
						return;
					}
//					if (ret.buttonIndex == 1) {
//						sourceType = "camera";
//						api.getPicture({
//							sourceType: sourceType,
//							encodingType: 'jpg',
//							mediaValue: 'pic'
//						}, function(ret, err) {
//							if (ret) {
//								upload(ret.data);
//							} else {
//								api.toast({
//									msg: err.msg
//								});
//							}
//						});
//					}
					if (ret.buttonIndex == 1) {
						obj.open({
							type: 'picture',
							column: 4,
							classify: true,
							max: 1,
							sort: {
								key: 'time',
								order: 'desc'
							},
							texts: {
								stateText: '已选择*项',
								cancelText: '取消',
								finishText: '完成'
							},
							styles: {
								bg: '#fff',
								mark: {
									icon: '',
									position: 'bottom_left',
									size: 20
								},
								nav: {
									bg: '#eee',
									stateColor: '#000',
									stateSize: 18,
									cancelBg: 'rgba(0,0,0,0)',
									cancelColor: '#000',
									cancelSize: 18,
									finishBg: 'rgba(0,0,0,0)',
									finishColor: '#000',
									finishSize: 18
								}
							}
						}, function(ret) {
							if (ret) {
								upload(ret.list[0].path);
								//										alert(ret.list[0].path);
							} else {
								api.alert({
									msg: "图片读取失败!"
								});
							}
						});
					}
				});
			}

			function loginstatus() {
				var key = getUserKey();
				var data = {
					key: key
				}
				var url = MYAPP.webroot + "/api/index.php/Home/User/memberinfo/";
				api.ajax({
					url: url,
					method: 'post',
					timeout: 30,
					dataType: 'json',
					returnAll: false,
					data: {
						values: data
					}
				}, function(ret, err) {
					if (ret.code) {
						var data = ret.data;
						document.getElementById("name").innerHTML = data.nickname;
						if (data.mediumavatar != "") {
							var imgurlafter = data.mediumavatar;
							imgurlafter = imgurlafter.replace("public:\/", "");
							var imgurl = MYAPP.webroot + "/files" + imgurlafter;
							document.getElementById("avatar").src = imgurl;
						}
					} else {
						api.toast({
							msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
							location: 'middle',
							duration: 1000
						});
					}
				});
			}
			apiready = function() {
				loginstatus();
				mui('#list').on('tap', 'a', function() {
					var url = this.getAttribute('href');
					if (url) {
						api.openWin({
							name: url,
							url: url,
							bgColor: '#fff'
						});
					}
				});
				document.getElementById("avatar").addEventListener('tap', function() {
					changeAvatar();
				});
				document.getElementById("changeavatar").addEventListener('tap', function() {
					changeAvatar();
				});
			}
		</script>
	</body>

</html>